<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：使用CSS3美化复选框checkbox</title>
<meta name="keywords" content="css3,表单,复选框美化" />
<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />
<link rel="stylesheet" type="text/css" href="http://www.helloweba.com/demo/css/main.css" />
<style type="text/css">
.demo{width:560px; margin:60px auto 10px auto}
.wrap{margin:30px 0}
.wrap p{padding:10px 0}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<script src="modernizr.js"></script>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>

<body>
	
<div id="header">
   <div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div>
</div>

<div id="main">
   <h2 class="top_title"><a href="http://www.helloweba.com/view-blog-295.html">使用CSS3美化复选框checkbox</a></h2>
	<div class="demo">
		<div class="wrap">
			<p>1. 勾选</p>
			<input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>
			<input type="checkbox" id="checkbox_a2" class="chk_1" /><label for="checkbox_a2"></label>
		</div>
		<div class="wrap" style="width:198px">
			<p>2. 单按钮</p>
			<input type="checkbox" id="checkbox_b1" class="chk_2" /><label for="checkbox_b1">我同意</label>
		</div>
		
		<div class="wrap" style="width: 180px;">
			<p>3. 移动端开关</p>
			<input type="checkbox" id="checkbox_c1" class="chk_3" /><label for="checkbox_c1"></label>
			<input type="checkbox" id="checkbox_c2" class="chk_3" checked /><label for="checkbox_c2"></label>
		</div>
		
		<div class="wrap" style="width: 231px;">
			<p>4. 开启和关闭</p>
			<input type="checkbox" id="checkbox_d1" class="chk_4" /><label for="checkbox_d1"></label>
			<input type="checkbox" id="checkbox_d2" class="chk_4" checked /><label for="checkbox_d2"></label>
		</div>
	</div>
</div>

<div id="footer">
    <p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>

</body>
</html>
